// // views/BigFileUpload/index.jsx
// import React, { useState, useEffect, useMemo } from "react";
// import request from "../../utils/large-request";
// import styled from "styled-components";
// import hashWorker from "../../utils/hash-worker";
// import WorkerBuilder from "../../utils/worker-build";

// const CHUNK_SIZE = 1 * 1024 * 1024;

// const UpLoadFile = function () {
//   const [fileName, setFileName] = useState("");
//   const [fileHash, setFileHash] = useState("");
//   const [chunkList, setChunkList] = useState([]);
//   const [hashPercentage, setHashPercentage] = useState(0);

//   // 获取文件后缀名
//   const getFileSuffix = (fileName) => {
//     let arr = fileName.split(".");
//     if (arr.length > 0) {
//       return arr[arr.length - 1];
//     }
//     return "";
//   };

//   // 拆分文件
//   const splitFile = (file, size = CHUNK_SIZE) => {
//     const fileChunkList = [];
//     let curChunkIndex = 0;
//     while (curChunkIndex <= file.size) {
//       const chunk = file.slice(curChunkIndex, curChunkIndex + size);
//       fileChunkList.push({ chunk: chunk });
//       curChunkIndex += size;
//     }
//     return fileChunkList;
//   };
//   // 选择文件
//   const handleFileChange = (e) => {
//     const { files } = e.target;
//     if (files.length === 0) return;
//     // 保存文件名
//     setFileName(files[0].name);
//     // 文件分片
//     const chunkList = splitFile(files[0]);
//     setChunkList(chunkList);
//   };

//   // 发送合并请求
//   const mergeRequest = (hash) => {
//     request({
//       url: "http://localhost:3000/merge",
//       method: "post",
//       headers: {
//         "content-type": "application/json",
//       },
//       data: JSON.stringify({
//         // 服务器存储的文件名：hash+文件后缀名
//         fileHash: hash,
//         suffix: getFileSuffix(fileName),
//         // 用于服务器合并文件
//         size: CHUNK_SIZE,
//       }),
//     });
//   };
//   // 上传分片
//   const uploadChunks = async (chunksData, hash) => {
//     const formDataList = chunksData.map(({ chunk, hash }) => {
//       const formData = new FormData();
//       formData.append("chunk", chunk);
//       formData.append("hash", hash);
//       formData.append("suffix", getFileSuffix(fileName));
//       return { formData };
//     });

//     const requestList = formDataList.map(({ formData }, index) => {
//       return request({
//         url: "http://localhost:3000/upload",
//         data: formData,
//         onprogress: (e) => {
//           let list = [...chunksData];
//           list[index].progress = parseInt(String((e.loaded / e.total) * 100));
//           setChunkList(list);
//         },
//       });
//     });
//     // 上传文件
//     Promise.all(requestList).then(() => {
//       // 延迟发送合并请求，方便观察服务器合并文件的步骤
//       setTimeout(() => {
//         mergeRequest(hash);
//       }, 1000);
//     });
//   };
//   // 计算文件hash
//   const calculateHash = (chunkList) => {
//     return new Promise((resolve) => {
//       const woker = new WorkerBuilder(hashWorker);
//       woker.postMessage({ chunkList: chunkList });
//       woker.onmessage = (e) => {
//         const { percentage, hash } = e.data;
//         setHashPercentage(percentage);
//         if (hash) {
//           // 当hash计算完成时，执行resolve
//           resolve(hash);
//         }
//       };
//     });
//   };
//   // 上传文件
//   const handleUpload = async (e) => {
//     if (!fileName) {
//       alert("请先选择文件");
//       return;
//     }
//     if (chunkList.length === 0) {
//       alert("文件拆分中，请稍后...");
//       return;
//     }
//     // 计算hash
//     const hash = await calculateHash(chunkList);
//     console.log("文件的hash为：", hash);
//     setFileHash(hash);
//     const { shouldUpload, uploadedChunkList } = await verfileIsExist(
//       hash,
//       getFileSuffix(fileName)
//     );
//     console.log(shouldUpload);
//     if (!shouldUpload) {
//       alert("文件已存在，无需重复上传");
//       return;
//     }
//     let uploadedChunkIndexList = [];
//     if (uploadedChunkList && uploadedChunkList.length > 0) {
//       uploadedChunkIndexList = uploadedChunkList.map((item) => {
//         const arr = item.split("-");
//         return parseInt(arr[arr.length - 1]);
//       });
//       console.log(uploadedChunkIndexList);
//       alert("已上传的区块号：" + uploadedChunkIndexList.toString());
//     }
//     const chunksData = chunkList
//       .map(({ chunk }, index) => ({
//         chunk: chunk,
//         hash: hash + "-" + index,
//         progress: 0,
//       }))
//       .filter((item2) => {
//         // 过滤掉已上传的块
//         const arr = item2.hash.split("-");
//         return (
//           uploadedChunkIndexList.indexOf(parseInt(arr[arr.length - 1])) === -1
//         );
//       });
//     console.log(chunksData);
//     // 保存分片数据
//     setChunkList(chunksData);
//     // 开始上传分片
//     uploadChunks(chunksData, hash);
//   };

//   // 秒传：验证文件是否存在服务器
//   const verfileIsExist = async (fileHash, suffix) => {
//     const { data } = await request({
//       url: "http://localhost:3000/verFileIsExist",
//       headers: {
//         "content-type": "application/json",
//       },
//       data: JSON.stringify({
//         fileHash: fileHash,
//         suffix: suffix,
//       }),
//     });
//     return JSON.parse(data);
//   };

//   return (
//     <div>
//       <input type="file" onChange={handleFileChange} />
//       <br />
//       <button onClick={handleUpload}>上传</button>
//       <ProgressBox chunkList={chunkList} />
//     </div>
//   );
// };
// const BlockWraper = styled.div`
//   width: ${({ size }) => size + "px"};
//   height: ${({ size }) => size + "px"};
//   text-align: center;
//   font-size: 12px;
//   line-height: ${({ size }) => size + "px"};
//   border: 1px solid #ccc;
//   position: relative;
//   float: left;
//   &:before {
//     content: "${({ chunkIndex }) => chunkIndex}";
//     position: absolute;
//     width: 100%;
//     height: 10px;
//     left: 0;
//     top: 0;
//     font-size: 12px;
//     text-align: left;
//     line-height: initial;
//     color: #000;
//   }
//   &:after {
//     content: "";
//     position: absolute;
//     width: 100%;
//     height: ${({ progress }) => progress + "%"};
//     background-color: pink;
//     left: 0;
//     top: 0;
//     z-index: -1;
//   }
// `;
// const ChunksProgress = styled.div`
//   *zoom: 1;
//   &:after {
//     content: "";
//     display: block;
//     clear: both;
//   }
// `;
// const Label = styled.h3``;
// const ProgressWraper = styled.div``;
// const Block = ({ progress, size, chunkIndex }) => {
//   return (
//     <BlockWraper size={size} chunkIndex={chunkIndex} progress={progress}>
//       {progress}%
//     </BlockWraper>
//   );
// };

// const ProgressBox = ({ chunkList = [], size = 40 }) => {
//   const sumProgress = useMemo(() => {
//     if (chunkList.length === 0) return 0;
//     return (
//       (chunkList.reduce((pre, cur, sum) => pre + cur.progress / 100, 0) * 100) /
//       chunkList.length
//     );
//   }, [chunkList]);

//   return (
//     <ProgressWraper>
//       <Label>文件切分为{chunkList.length}段，每段上传进度如下：</Label>
//       <ChunksProgress>
//         {chunkList.map(({ progress }, index) => (
//           <Block
//             key={index}
//             size={size}
//             chunkIndex={index}
//             progress={progress}
//           />
//         ))}
//       </ChunksProgress>
//       <Label>总进度:{sumProgress.toFixed(2)}%</Label>
//     </ProgressWraper>
//   );
// };

// export default UpLoadFile;
